<template>
  <div>
    <el-table :data="store.state.menu.menuList" style="width: 100%; margin-bottom: 20px" row-key="id" border
      default-expand-all :tree-props="{ children: 'children' }">
      <el-table-column prop="id" label="菜单编号" />
      <el-table-column prop="title" label="菜单名称" />
      <el-table-column prop="pid" label="上级菜单" />
      <el-table-column prop="icon" label="菜单图标">
        <template v-slot="a">
          <el-icon>
            <component :is="a.row.icon"></component>
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="菜单地址" />
      <el-table-column label="状态">
        <template v-slot="a">
          <el-tag type="success" v-if="a.row.status == 1">启用</el-tag>
          <el-tag type="danger" v-if="a.row.status == 2">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="a">
          <el-button plain type="primary" @click="edit(a.row.id)">编辑</el-button>
          <el-button plain type="danger" @click="del(a.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import mit from '../../common/myMitt';
import { useStore } from "vuex";
import { menudelete } from '../../request/api';
import { ElMessage } from "element-plus";
import { getCurrentInstance } from "vue";

let getapp: any = getCurrentInstance();
let store = useStore();

store.dispatch('menu/getMenuList');

function edit(id: number) {
  mit.emit('getInfo', id);
}

function del(id: number) {
  getapp.appContext.config.globalProperties.$del(() => {
    menudelete({ id }).then((res: any) => {
      if (res.code == 200) {
        ElMessage.success(res.msg);
        store.dispatch('menu/getMenuList');
        return;
      }
      ElMessage.warning(res.msg);
    })
  })
}
</script>

<style lang="scss" scoped></style>